<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 10:27:49
 * @LastEditTime: 2021-09-05 17:38:57
 * @FilePath: /son-code/src/page/game/index.vue
 * @Description  : 
-->
<script setup lang="ts">
import writedownBlessings from "/@/assets/images/trueOn.png";
import awesome from "/@/assets/images/playGame.png";
function clickHander() {}
</script>

<template>
  <div class="gameSuccess">
    <div class="awesomeBox">
      <img :src="awesome" alt="awesome" class="awesome" />
    </div>
    <img
      :src="writedownBlessings"
      @click="clickHander"
      class="writedownBlessings"
      alt="写下祝福"
    />
  </div>
</template>

<style lang="scss" scoped>
.gameSuccess {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/gameDescriptionBkg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .writedownBlessings {
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translateX(-50%);
    width: 235px;
    height: 47px;
  }
  .awesomeBox {
    position: absolute;
    top: 188px;
    left: 50%;
    transform: translateX(-50%);
    width: 311px;
    height: 127px;
    .text {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      .textContent {
        position: relative;
        height: 100%;
        width: 100%;
        padding: 21px 14px;
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 34px;
        letter-spacing: 2px;
        color: #bd010c;
        text-align: center;
      }
    }
    img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
